<template>
    <div class="app-container">
        <el-form class="searchForm" :inline="true" size="mini" ref="searchForm" :model="searchForm">
            <el-form-item label="型号名称">
                <el-input v-model="searchForm.name" placeholder="请输入型号名称" clearable />
            </el-form-item>
            <el-form-item label="型号编码">
                <el-input v-model="searchForm.code" placeholder="请输入型号编码" clearable />
            </el-form-item>
            <el-form-item label="设备分类">
                <el-select v-model="searchForm.equipClassify" placeholder="请选择设备分类" disabled>
                    <el-option v-for="item in enums.EQUIP_CLASSIFY" :key="item.code" :label="item.label"
                        :value="item.code">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" size="mini" icon="el-icon-search" @click="doSearch">搜索</el-button>
                <el-button type="default" size="mini" icon="el-icon-refresh" @click="resetSearch">重置</el-button>
            </el-form-item>
        </el-form>
        <div class="searchs-content">
            <el-button type="primary" v-permission="['system:model:add']" size="mini" plain icon="el-icon-plus"
                @click="addDialog">新增</el-button>
        </div>
        <Table :tableHeader="tableHeader" :tableData="tableData" :tableLoading="listLoading">
            <template slot="action" slot-scope="scope">
                <el-button type="primary" v-permission="['system:model:edit']" size="mini"
                    @click="addDialog(scope.row)">编辑</el-button>
                <el-button type="danger" v-permission="['system:model:delete']" size="mini"
                    @click="handleDelete(scope.row)">删除</el-button>
            </template>
        </Table>
        <pagination v-if="total > 0" :total="total" :page.sync="searchForm.pageNum" :limit.sync="searchForm.pageSize"
            @pagination="fetchData" />

        <!-- 弹框 -->
        <Dialog :visible="visible" width="32%" :loading="dialogBtnLoading" :title="dialogTitle"
            @confirmDialog="confirmDialog" @cancelDialog="cancelDialog">
            <el-form ref="dialogForm" :model="dialogForm" label-width="120px" :rules="dialogRules" size="small">
                <el-form-item label="型号名称" prop="name">
                    <el-input class="ipt" v-model="dialogForm.name" placeholder="请输入型号名称" clearable />
                </el-form-item>
                <el-form-item label="型号编码" prop="code">
                    <el-input class="ipt" v-model="dialogForm.code" placeholder="请输入型号编码" clearable />
                </el-form-item>
                <el-form-item label="设备分类" prop="equipClassify">
                    <el-select class="ipt" v-model="dialogForm.equipClassify" placeholder="请选择设备分类" disabled>
                        <el-option v-for="item in enums.EQUIP_CLASSIFY" :key="item.code" :label="item.label"
                            :value="item.code">
                        </el-option>
                    </el-select>
                </el-form-item>
            </el-form>
        </Dialog>
    </div>
</template>
  
<script>
import { model } from "@/api/factuer";
import Pagination from "@/components/Pagination"; // secondary package based on el-pagination
import Table from "@/components/Table";
import Dialog from "@/components/Dialog";

import { handleConfirm } from "@/utils/messageBox";
import { removeNullUndefined } from "@/utils/index.js";
import { mapGetters } from "vuex";

export default {
    components: { Pagination, Table, Dialog },
    data() {
        return {
            listLoading: true,
            total: 0,
            searchForm: {
                pageNum: 1,
                pageSize: 15,
                name: "",
                code: "",
                equipClassify: "",
            },

            tableHeader: [
                {
                    type: "index",
                    label: "序号",
                    width: "60",
                    fixed: true,
                },
                {
                    label: "型号名称",
                    prop: "name",
                },
                {
                    label: "型号编码",
                    prop: "code",
                },
                {
                    label: "设备分类",
                    prop: "equipClassify",
                    formatter: (item) => {
                        let classify = this.enums.EQUIP_CLASSIFY.find((p) => {
                            return p.code == item.equipClassify;
                        });
                        return classify.label;
                    },
                },
                {
                    label: "创建人",
                    prop: "createBy",
                },
                {
                    label: "创建时间",
                    prop: "createTime",
                },
                { slot: "action", label: "操作", width: "180" },
            ],
            tableData: [],
            visible: false, //弹框标识
            dialogForm: {
                name: "",
                code: "",
                equipClassify: "",
            },
            dialogRules: {
                name: [{ required: true, message: "请输入型号名称", trigger: "blur" }],
                code: [{ required: true, message: "请输入型号编码", trigger: "blur" }],
                equipClassify: [
                    { required: true, message: "请选择设备分类", trigger: "change" },
                ],
            },
            dialogTitle: "",

            dialogBtnLoading: false,

            currentRow: {},
        };
    },
   
    computed: {
        ...mapGetters(["enums", "equipTypeCode"]),
   },
   watch:{
    equipTypeCode:{
        handler(val){
            this.searchForm.equipClassify = val;
        },
        immediate:true,
    },
   },
    async created() {
        this.fetchData();
    },
    methods: {
        fetchData(val) {
            this.searchForm.pageNum = val ? val.page : this.searchForm.pageNum;
            this.listLoading = true;
            this.tableData = [];
            this.total = 0;
            model("/list", "post", { ...removeNullUndefined(this.searchForm) }, 1)
                .then((res) => {
                    this.tableData = res.data;
                    this.total = +res.total;

                    this.searchForm.pageNum = +res.pageNum;
                })
                .finally(() => {
                    this.listLoading = false;
                });
        },

        // 弹框取消
        cancelDialog() {
            this.visible = false;
            this.clearData();
            this.resetDialogForm("dialogForm");
        },
        clearData() {
            this.dialogForm = {
                name: "",
                code: "",
                equipClassify: "",
            };
        },
        // 弹框确认
        confirmDialog() {
            this.submitDialogForm("dialogForm");
        },
        // 新增
        async addDialog(row) {
            this.visible = true;

            if (row.id) {
                this.dialogTitle = "编辑";
                this.currentRow = { ...row };
                let {
                    id,
                    name,
                    code,
                    equipClassify,
                } = row;
                this.dialogForm = {
                    id,
                    name,
                    code,
                    equipClassify,
                };
            } else {
                this.dialogTitle = "新增";
                this.currentRow = {};
                this.dialogForm = {
                    name: "",
                    code: "",
                    equipClassify: this.equipTypeCode,
                };
            }
        },
        handleDelete(row) {
            handleConfirm("删除后不可恢复，确定继续？", "warning", "提示")
                .then((res) => {
                    this.doDelete(row);
                })
                .catch((err) => { });
        },
        doDelete(row) {
            model(`/delete/${row.id}`, "delete").then((res) => {
                if (res.code == 200) {
                    this.$message.success(res.message);
                    this.fetchData();
                }
            });
        },

        submitDialogForm(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    let msg = this.currentRow.id ? "编辑" : "新增";
                    handleConfirm(`确定要${msg}吗？`, "warning", "提示")
                        .then((res) => {
                            this.doAdd();
                        })
                        .catch((err) => { });
                } else {
                    return false;
                }
            });
        },
        resetDialogForm(formName) {
            this.$refs[formName].resetFields();
        },

        resetSearch() {
            this.searchForm = {
                pageNum: this.searchForm.pageNum,
                pageSize: this.searchForm.pageSize,
                name: "",
                code: "",
                equipClassify: this.equipTypeCode,
            };
        },
        doSearch() {
            this.searchForm.pageNum = 1;
            this.fetchData();
        },

        doAdd() {
            this.dialogBtnLoading = true;
            if (this.currentRow.id) {
                this.dialogForm.id = this.currentRow.id;
            }
            let url = this.currentRow.id
                ? `/update`
                : "/insert";
            model(url, "post", this.dialogForm, 1)
                .then((res) => {
                    if (res.code == 200) {
                        this.$message.success(res.message);
                        this.visible = false;
                        this.fetchData();
                    }
                })
                .finally(() => {
                    this.dialogBtnLoading = false;
                });
        },
    },
};
</script>
<style lang="scss" scoped>
.ipt {
    width: 94%;
}
.searchForm {
    padding-left: 8px;
    .el-form-item {
        margin-bottom: 8px;
    }
}
::v-deep .el-input.is-disabled .el-input__inner{
    color: #333333;
}
</style>
  